<template>
    <van-popup class="modal-white" v-model:show="show" teleport="body" position="top" @closed="close" round @opened="opened">
        <div class="modal-container">
            <textarea v-model.trim="childInput" id="area" placeholder="Please enter" autofocus maxlength="20"></textarea>
            <div class="footer">
                <div class="tips">Enter up to 20 characters</div>
                <div :class="['button',{mock:!childInput}]" @click="submit">Submit</div>
            </div>
        </div>
    </van-popup>
</template>
<script>
import { reactive, toRefs } from '@vue/reactivity'
import { inject, onMounted } from '@vue/runtime-core'
export default {
    props:['show','input'],
    setup(props,ctx) {
        const vueState = inject('vueState')
        const state = reactive({
            childInput:''
        })
        const close = ()=>{
            ctx.emit('update:show',false)
        }
        const submit = ()=> {
            if(!state.childInput){
                return
            }
            ctx.emit('update:input',state.childInput)
            close()
        }
        const opened = ()=> {
            state.childInput = props.input
            document.getElementById('area').focus()
        }
        return {
            ...toRefs(state),
            close,
            submit,
            vueState,
            opened
        }
    }
}
</script>
<style lang="less" scoped>
.tee{
    height: .2rem;
    width: .3rem;
    background-color: red;
}
.modal{
    &-white{
        padding-bottom: .5rem;
    }
    &-header{
        padding:.16rem .16rem .04rem .2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title{
            font-size: .16rem;
            font-weight: 500;
            color: black;
            line-height: .28rem;
        }
        .close{
            height: .24rem;
            width: .24rem;
            background: url(../../assets/images/Modal/modal_close_green.png) no-repeat center;
            background-size: contain;
        }
    }
    &-container{
        padding: .2rem .2rem .4rem;
        textarea{
            display: block;
            height:.78rem;
            width: 100%;
            border-radius: .08rem;
            border: none;
            outline: none;
            background-color:#F5F6F9;
            padding: .08rem .12rem;
            font-size: .16rem;
            font-weight: 500;
            color: #121314;
            line-height: .28rem;
            resize: none;
            &::placeholder{
                color:#9C9DA6;
            }
        }
        .footer{
            margin-top: .16rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .tips{
                font-size: .12rem;
                font-weight: 400;
                color:#9C9DA6;
                line-height: .2rem;
            }
            .button{
                .unique-button();
                width: .72rem;
                font-size: .14rem;
                height:.28rem;
                &.mock{
                    opacity: .5;
                }
            }
        }
    }
}
</style>